<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        data与el的2种写法
        1.el有2种写法
            (1).new Vue时候配置el属性。
            (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
        2.data有2种写法
            (1).对象式
            (2).函数式
            如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
        3.一个重要的原则:
            由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。 
    -->

    <div id="app">
        <h3>{{name}}</h3>
    </div>
    <script>
    //配置完全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip=false;
        
        //el的两种写法
        // var vm=new Vue({
        // //    el:'#app',// 第一种写法
        //    data:{
        //        name: '阿里云'
        //    },
        //    methods:{}
        // });
        // console.log(vm);
        // vm.$mount("#app");// 第二种写法
        // 设置一个计时器
        // setTimeout(()=>{
        //     vm.$mount("#app");
        // },1000);

        // data的两种写法
        var vm=new Vue({
           el:'#app',
           // data的第一种写法：对象式
        //    data:{
        //        name: '阿里云'
        //    },
           // data的第二种写法：函数式
           data:function(){
               return{
                   name: '阿里云666'
               }
           },
           methods:{}
        });

    </script>
</body>

</html>